<!DOCTYPE html>
<html>


<head>
  <link rel="stylesheet" href="./static/js/layui/css/layui.css" media="all">
  <script src="./static/js/layui/layui.js"></script>
  <script src="./static/js/jquery.min.js"></script>
  <script src="./static/js/vue/vue.min.js"></script>
  
</head>

<body>

  <!--列表-->
  <div id="app">
    <table class="layui-table" lay-filter="test">
      <thead>
        <tr>
          <th width="10%">ID</th>
          <th width="50%">语言名称</th>
          <th width="40%">语言备注</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in lang_ls">
          <!-- <td>{[item]}</td> -->
          <td>{[item.Id]}</td>
          <td>{[item.LangName]}</td>
          <td>{[item.LangComment]}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!--分页容器-->
  <div id="pagination"></div>

  <!-- <script src="../../../templates/pages/basic_data/layui_laytable_list.js"></script> -->

  <script>
    //使用Vue渲染模板，初始化时是没有数据的，需要ajax请求拿到数据
    var vue = new Vue({
        el: "#app",
        delimiters: ['{[', ']}'],
        data: {
            lang_ls:null,
        }
    });

    //使用layui分页
    layui.use('laypage', function () {
        var laypage = layui.laypage;
        laypage.render({
            elem: 'pagination'
            , count: totalCount
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , jump: function (obj, first) {
                //点击非第一页页码时的处理逻辑。比如这里调用了ajax方法，异步获取分页数据
                if (!first) {
                    pagination(obj.curr, obj.limit);//第二个参数不能用变量pageSize，因为当切换每页大小的时候会出问题
                }
            }
        });
    });

    var pageIndex = 1;
    var pageSize = 10;
    var totalCount = 100;
    pagination(pageIndex, pageSize);
    function pagination(pageIndex, pageSize) {
        //查询条件
        var param = {
            pageIndex: pageIndex,
            pageSize: pageSize,
            //其它查询条件可在下面添加
        };
        $.ajax({
            // type: 'POST',
            type: 'get',
            url: 'http://localhost:5555/test',
            dataType: 'json',
            // data:{
            //     pageIndex:pageIndex,
            //     pageSize:pageSize,
            // },
            data: param,
            async: false,//这里设置为同步执行，目的是等数据加载完再调用layui分页组件，不然分页组件拿不到totalCount的值
            success: function (data) {
                console.log(param)
                vue.lang_ls = data.data;
                totalCount = data.count;
            }
        });
    };
  </script>
</body>

</html>